<template>
  <div class="coffee-list">
    <NavBar />
    <br>
    <el-carousel :interval="4000" class="carousel">
      <el-carousel-item v-for="coffee in carouselCoffees" :key="coffee.id">
        <img :src="coffee.carouselImage" class="coffee-carouselImage" alt="Coffee CarouselImage"/>
      </el-carousel-item>
    </el-carousel>
    <h1>咖啡列表</h1>
    <div class="search-bar">
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索关键字"
        clearable
        class="search-input"
      ></el-input>
    </div>
    <div class="category-buttons">
      <el-button 
        v-for="category in categories" 
        :key="category" 
        :type="selectedCategory === category ? 'primary' : 'default'" 
        @click="selectCategory(category)">
        {{ category }}
      </el-button>
    </div>
    <ul>
      <li v-for="coffee in filteredCoffees" :key="coffee.id">
        <img :src="coffee.image" class="coffee-image" alt="Coffee Image"/>
        <h2>{{ coffee.name }}</h2>
        <p>价格: {{ coffee.price }}元</p>
        <div class="button-group">
          <el-button 
            type="primary" 
            @click="addToCart(coffee)" 
            class="small-button">
            加入购物车
          </el-button>
          <el-button 
            :type="isFavorite(coffee) ? 'success' : 'plain'" 
            @click="addToFavorites(coffee)" 
            :class="{'active-button': isFavorite(coffee), 'small-button': true}">
            {{ isFavorite(coffee) ? '已收藏' : '收藏' }}
          </el-button>
        </div>
        <div class="detail-button">
          <el-button 
            type="info" 
            @click="showDetails(coffee)">
            查看详情
          </el-button>
        </div>
      </li>
    </ul>
    <el-dialog title="商品详情" :visible.sync="dialogVisible" width="40%">
      <div v-if="selectedCoffee" class="detail-content">
        <img :src="selectedCoffee.image" class="detail-image-smaller" alt="Coffee Image"/>
        <div class="detail-info">
          <h3>{{ selectedCoffee.name }}</h3>
          <p>价格: {{ selectedCoffee.price }}元</p>
          <p>规格: {{ selectedCoffee.specification }}</p>
          <el-button 
            :type="isFavorite(selectedCoffee) ? 'success' : 'plain'" 
            @click="addToFavorites(selectedCoffee)">
            {{ isFavorite(selectedCoffee) ? '已收藏' : '收藏' }}
          </el-button>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import NavBar from './NavBar.vue';

export default {
  name: 'CoffeeList',
  components: {
    NavBar
  },
  data() {
    return {
      coffees: [
        { id: 1, name: '茉莉花香拿铁', price: 18, image: require('@/assets/蛋糕1.jpg'),
         carouselImage: require('@/assets/轮播图1.jpg'), specification: '100g', category: '风味美式' },
        { id: 2, name: '小黄油拿铁', price: 18, image: require('@/assets/蛋糕2.jpg'),
         carouselImage: require('@/assets/轮播图2.jpg'), specification: '100g', category: '风味美式' },
        { id: 3, name: '陨石拿铁', price: 18, image: require('@/assets/蛋糕3.jpg'),
         carouselImage: require('@/assets/轮播图3.jpg'), specification: '100g', category: '风味美式' },
        { id: 4, name: '生椰丝绒拿铁', price: 18, image: require('@/assets/蛋糕4.jpg'),
         carouselImage: require('@/assets/轮播图2.jpg'), specification: '200g', category: '生椰家族' },
        { id: 5, name: '柚C美式', price: 18, image: require('@/assets/蛋糕5.jpg'),
         carouselImage: require('@/assets/轮播图3.jpg'), specification: '350g', category: '水果美式' },
      ],
      categories: ['全部', '风味美式', '水果美式' ,'生椰家族'],
      selectedCategory: '全部',
      searchKeyword: '',
      cart: [],
      dialogVisible: false,
      selectedCoffee: null,
      favorites: JSON.parse(localStorage.getItem('favorites')) || []
    };
  },
  computed: {
    carouselCoffees() {
      return this.coffees.slice(0, 3); // 只取前三张图片用于轮播
    },
    filteredCoffees() {
      let filtered = this.coffees;

      if (this.selectedCategory !== '全部') {
        filtered = filtered.filter(coffee => coffee.category === this.selectedCategory);
      }

      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        filtered = filtered.filter(coffee => 
          coffee.name.toLowerCase().includes(keyword) ||
          coffee.specification.toLowerCase().includes(keyword)
        );
      }

      return filtered;
    }
  },
  methods: {
    addToCart(coffee) {
      const cart = JSON.parse(localStorage.getItem('cart')) || [];
      const existingItem = cart.find(item => item.id === coffee.id);
      if (existingItem) {
        existingItem.quantity++;
      } else {
        coffee.quantity = 1; // 初始化数量为1
        cart.push(coffee);
      }
      localStorage.setItem('cart', JSON.stringify(cart));
    },
    showDetails(coffee) {
      this.selectedCoffee = coffee;
      this.dialogVisible = true;
    },
    selectCategory(category) {
      this.selectedCategory = category;
    },
    addToFavorites(coffee) {
      const index = this.favorites.findIndex(fav => fav.id === coffee.id);
      if (index > -1) {
        this.favorites.splice(index, 1);
      } else {
        this.favorites.push(coffee);
      }
      localStorage.setItem('favorites', JSON.stringify(this.favorites));
    },
    isFavorite(coffee) {
      return this.favorites.some(fav => fav.id === coffee.id);
    },
    goToCoffeeDetail(coffee) {
      this.$router.push({ path: `/coffee/${coffee.id}` });
    }
  }
};
</script>

<style scoped>
.coffee-list h1 {
  text-align: center;
  margin-bottom: 20px;
}
.coffee-list ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* 允许列表项换行 */
  justify-content: center; /* 居中对齐 */
}
.coffee-list li {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc((100% / 5) - 20px); /* 设置列表项的宽度，每行5个 */
  box-sizing: border-box; /* 包含内边距和边框在内的宽度计算 */
}
.coffee-list .coffee-image {
  width: 100%; /* 让图片宽度充满容器 */
  height: auto; /* 保持图片的宽高比 */
  margin-bottom: 10px;
}
.coffee-list .button-group {
  display: flex;
  justify-content: center;
  gap: 10px; /* 按钮之间的间距 */
}
.coffee-list .detail-button {
  margin-top: 10px; /* 与上方按钮组的间距 */
}
.coffee-list button {
  margin-top: 10px;
  margin-bottom: 10px; /* 添加底部外边距以对齐按钮 */
  background-color: #ffc0cb; /* 粉红色 */
  border-color: #ffc0cb; /* 粉红色 */
  color: white;
  padding: 8px 16px; /* 减小按钮的大小 */
  font-size: 14px; /* 减小字体大小 */
}
.coffee-list button:hover {
  background-color: #ff69b4; /* 更深的粉红色 */
  border-color: #ff69b4; /* 更深的粉红色 */
}
.coffee-list button.active-button {
  background-color: #ff1493; /* 更浅的粉红色 */
  border-color: #ff1493; /* 更浅的粉红色 */
}
.coffee-list button.small-button {
  padding: 6px 12px; /* 更小的按钮大小 */
  font-size: 12px; /* 更小的字体大小 */
}
.carousel {
  margin-bottom: 20px;
  overflow: hidden; /* 确保轮播图内容不溢出 */
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.coffee-carouselImage {
  width: 100%;
  height: 400px; /* 设置图片高度 */
  object-fit: cover; /* 确保图片覆盖整个区域，不留空白 */
  border-radius: 8px;
}
.detail-content {
  display: flex;
  align-items: center;
}

.detail-image-smaller {
  width: 150px; /* 减小图片宽度 */
  height: 150px; /* 减小图片高度 */
  object-fit: cover; /* 确保图片覆盖整个区域 */
  border-radius: 8px;
  margin-right: 20px; /* 图片与信息之间的间距 */
}

.detail-info {
  flex: 1;
}

.detail-info h3 {
  margin-top: 0;
}

.detail-info p {
  margin: 5px 0;
}

.search-bar {
  display: flex;
  justify-content: center; /* 水平居中 */
  margin-bottom: 20px; /* 添加底部间距 */
}

.search-input {
  width: 300px; /* 设置搜索框的宽度 */
}

/* 分类按钮样式调整 */
.category-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.category-buttons .el-button {
  margin: 0 10px;
}

.category-buttons .el-button.primary {
  background-color: #ff69b4; /* 更深的粉红色 */
  border-color: #ff69b4; /* 更深的粉红色 */
}

.category-buttons .el-button.default {
  background-color: #ffc0cb; /* 粉红色 */
  border-color: #ffc0cb; /* 粉红色 */
}

.category-buttons .el-button.default:hover {
  background-color: #ff69b4; /* 更深的粉红色 */
  border-color: #ff69b4; /* 更深的粉红色 */
}
</style>